<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>首页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        h2 {
            color: #444;
            margin-top: 30px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f8f9fa;
            color: #333;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .user-info {
            text-align: center;
            margin-bottom: 30px;
            color: #666;
        }

            /* 添加模态对话框样式 */
            .modal {
                display: none;
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0,0,0,0.4);
            }
            .modal-content {
                background-color: #fefefe;
                margin: 15% auto;
                padding: 20px;
                border: 1px solid #888;
                width: 50%;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            }
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }
            .close:hover {
                color: black;
                cursor: pointer;
            }
        </style>

</head>
<body>
    <h1>欢迎来到图书馆管理系统</h1>
    <p class="user-info">当前用户：${user.username}</p>


    <h2>图书列表</h2>
    <table>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>操作</th>  <!-- 新增操作列标题 -->
        </tr>
        <c:forEach items="${books}" var="book">
            <tr>
                <td>${book.bookname}</td>
                <td>${book.author}</td>
                <td>${book.publisher}</td>
                <td>${book.publishDate}</td>
                <td>${book.price}</td>
                <td>
                    <!-- 修改按钮 -->
                    <button onclick="editBook(${book.bookid})" style="padding: 5px 10px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px;">修改</button>
                    <!-- 删除按钮 -->
                    <button onclick="deleteBook(${book.bookid})" style="padding: 5px 10px; background-color: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer;">删除</button>
                </td>
            </tr>
        </c:forEach>
    </table>
    
    <!-- 添加书籍按钮 -->
    <button onclick="openModal()" style="margin-bottom: 20px; padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">添加书籍</button>

    <!-- 模态对话框 -->
    <div id="addBookModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">&times;</span>
            <h2>添加新书</h2>
            <form id="bookForm" action="${pageContext.request.contextPath}/book/add" method="post">
                <table>
                    <tr>
                        <td>书名:</td>
                        <td><input type="text" name="bookname" required></td>
                    </tr>
                    <tr>
                        <td>作者:</td>
                        <td><input type="text" name="author" required></td>
                    </tr>
                    <tr>
                        <td>出版社:</td>
                        <td><input type="text" name="publisher" required></td>
                    </tr>
                    <tr>
                        <td>出版日期:</td>
                        <td><input type="date" name="publishDate" required></td>
                    </tr>
                    <tr>
                        <td>价格:</td>
                        <td><input type="number" step="0.01" name="price" required></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="提交"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        function openModal() {
            document.getElementById('addBookModal').style.display = 'block';
        }
        
        function closeModal() {
            document.getElementById('addBookModal').style.display = 'none';
        }
        
        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('addBookModal');
            if (event.target == modal) {
                closeModal();
            }
        }
        
        // 表单提交后关闭模态框
        document.getElementById('bookForm').onsubmit = function() {
            closeModal();
            return true;
        }
    </script>

    <!-- 添加修改模态对话框 -->
    <div id="editBookModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeEditModal()">&times;</span>
            <h2>修改书籍信息</h2>
            <form id="editBookForm" action="${pageContext.request.contextPath}/book/update" method="post">
                <input type="hidden" name="bookid" id="editBookId">
                <table>
                    <tr>
                        <td>书名:</td>
                        <td><input type="text" name="bookname" id="editBookName" required></td>
                    </tr>
                    <tr>
                        <td>作者:</td>
                        <td><input type="text" name="author" id="editAuthor" required></td>
                    </tr>
                    <tr>
                        <td>出版社:</td>
                        <td><input type="text" name="publisher" id="editPublisher" required></td>
                    </tr>
                    <tr>
                        <td>出版日期:</td>
                        <td><input type="date" name="publishDate" id="editPublishDate" required></td>
                    </tr>
                    <tr>
                        <td>价格:</td>
                        <td><input type="number" step="0.01" name="price" id="editPrice" required></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="更新"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>

    <script>
        function editBook(bookId) {
            // 获取书籍信息并填充表单
            fetch('${pageContext.request.contextPath}/book/get?id=' + bookId)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('editBookId').value = data.bookid;
                    document.getElementById('editBookName').value = data.bookname;
                    document.getElementById('editAuthor').value = data.author;
                    document.getElementById('editPublisher').value = data.publisher;
                    document.getElementById('editPublishDate').value = data.publishDate;
                    document.getElementById('editPrice').value = data.price;
                    document.getElementById('editBookModal').style.display = 'block';
                });
        }

        function closeEditModal() {
            document.getElementById('editBookModal').style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('editBookModal');
            if (event.target == modal) {
                closeEditModal();
            }
        }

        function deleteBook(bookId) {
            if(confirm("确定要删除这本书吗？")) {
                // 这里添加删除书籍的逻辑
                console.log("删除书籍ID: " + bookId);
                // 可以发送AJAX请求到后端删除
                window.location.href = "${pageContext.request.contextPath}/book/delete?id=" + bookId;
            }
        }
    </script>

    <!-- 分页导航 -->
    <div class="pagination">
        <c:if test="${currentPage > 1}">
            <a href="${pageContext.request.contextPath}/book/list?pageNum=${currentPage-1}">上一页</a>
        </c:if>
        
        <c:forEach begin="1" end="${totalPages}" var="i">
            <c:choose>
                <c:when test="${i == currentPage}">
                    <span class="current">${i}</span>
                </c:when>
                <c:otherwise>
                    <a href="${pageContext.request.contextPath}/book/list?pageNum=${i}">${i}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        
        <c:if test="${currentPage < totalPages}">
            <a href="${pageContext.request.contextPath}/book/list?pageNum=${currentPage+1}">下一页</a>
        </c:if>
    </div>
    
    <!-- 添加样式 -->
    <style>
        .pagination {
            margin-top: 20px;
            text-align: center;
        }
        .pagination a, .pagination span {
            display: inline-block;
            padding: 5px 10px;
            margin: 0 5px;
            border: 1px solid #ddd;
            text-decoration: none;
        }
        .pagination a:hover {
            background-color: #f5f5f5;
        }
        .pagination .current {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</body>
</html>
